<template>
  <div class="regMain">
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_phone.png" class="img">
      <input type="text" @change="onRegInput" class="username" v-model="regData.phone" placeholder="请输入手机号码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_code.png" class="img">
      <input type="text" @change="onRegInput" class="pwd" v-model="regData.code" placeholder="输入验证码" autocomplete="new-password">
      <div class="code_btn">
        <box>
          <x-button :type="codeStatus.codeType" @click="getCode" :disabled="codeStatus.disabled">{{codeStatus.codeTitle}}</x-button>
        </box>
      </div>
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_key.png" class="img">
      <input type="password" @change="onRegInput" class="pwd" v-model="regData.pwd" placeholder="输入6-16位的数字或字母作为密码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_invite.png" class="img">
      <input type="text" @change="onRegInput" class="pwd" v-model="regData.invite" placeholder="请输入邀请人的邀请码(选填)" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_birthday.png" class="img">
      <datetime :min-year="minYear" :max-year="maxYear" class="birthday_select" @on-change="regchange" :title="regData.birthday" clear-text="clear" @on-clear="regclearValue">
        <input type="text" class="pwd" v-model="regData.birthday" placeholder="请选择生日信息(选填)" autocomplete="new-password">
      </datetime>
    </div>
  </div>
</template>
<script>
import { XInput, Group, XButton, Box, Datetime, Scroller } from './../../../components'
var MyRequest = require('./../../../commons/js/MyRequest.js')
var Global = require("./../../../commons/js/Global.js")
export default {
  props: {
  },
  data () {
    return {
      regData: {
        phone: "",
        pwd: "",
        code: "",
        invite: "",
        birthday: ""
      },
      codeStatus: {
        disabled: false,
        codeType: 'warn',
        codeTitle: "获取验证码",
        time: 60
      },
      minYear: 1900,
      maxYear: 2100,
    }
  },
  components: {
    XInput,
    Group,
    XButton,
    Box,
    Datetime,
    Scroller
  },
  methods: {
    onRegInput () {
      this.$emit('message', this.regData)
    },
    regchange (value) {
      this.regData.birthday = value
      this.$emit('message', this.regData)
    },
    regclearValue () {
      this.regData.birthday = ""
    },
    getCode () {
      if(!(/^1[34578]\d{9}$/.test(this.regData.phone))) {
          Global.showToast('请检查手机号格式', this)
          
          return; 
      } 
      var data = {
        action: "code2",
        mobile: this.regData.phone,
      }
      MyRequest.MyGetWithToast("Code", this, function (result, that) {
        console.log(result)
        Global.closeLoading();
        if(!result.success) {
          Global.showToast(result.msg, that)
          return;
        }
        Global.showToast( "发送成功", that)
        //开一个定时器
        that.codeStatus = {
          disabled: true,
          codeType: 'default',
          codeTitle: "60",
          time: 60
        }
        var t = setInterval(function () {
          that.codeStatus.codeTitle = --that.codeStatus.time;
          if (that.codeStatus.time <= 0) {
            clearInterval(t);
            that.codeStatus = {
              disabled: false,
              codeType: 'warn',
              codeTitle: "获取验证码",
              time: 60
            }
          }
        }, 1000)
      }, data)
    }
  }
}
</script>
<style>
  .regMain {
    position: relative;
    width: 100%;
  }
  .regMain .input-box {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .regMain .input-box .img {
    width: 2.4rem;
    height: 2.4rem;
    padding-top: 3px;
  }
  .regMain .input-box input {
    flex: 7;
    border: 0;
    outline: none;
    padding-left: 1rem;
    background-color: #fff;
    font-family: "微软雅黑";
    height: 2.4rem;
    font-size: 1.4rem;
    padding-top: 3px;
  }
  .regMain .input-box .code_btn {
    width: 8rem;
    height: 2.4rem;
  }
   .regMain .input-box .code_btn .weui_btn {
     padding-left: 0;
     padding-right: 0;
     line-height: 2.6rem;  
     padding-top: 1px;
     padding-bottom: 1px;
   }
  .regMain .input-box .code_btn button {
    font-size: 1.3rem;
    font-family: "微软雅黑";
  }
  .regMain .input-box .birthday_select {
    flex: 1;
    padding: 0;
  }
  .regMain .input-box .birthday_select:before {
    border-top: 0;
  }
  .dp-header .dp-item {
    color: orange;
  }

</style>